<!-- 用户注册页面 -->
<template>
    <div class="login-wrap">
        <!-- left common -->
        <div class="login-banner"></div>
        <div class="login-right">
            <div class="login-content">
                <p class="login-tipe">欢迎注册</p>
                <el-form ref="registerForm" :rules="rules" :model="registerForm">
                    <el-form-item prop="phone">
                        <el-input v-model="registerForm.phone" placeholder="输入手机号" minlength="11" maxlength="11">
                            <i class="el-icon-phone-outline el-input__icon" slot="prefix"></i>
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="code">
                        <el-col :span="12">
                            <el-input v-model.trim="registerForm.code" placeholder="验证码" maxlength="6" @keyup.enter.native="login()">
                                <i class="el-icon-discount el-input__icon" slot="prefix"></i>
                            </el-input>
                        </el-col>
                        <el-col :span="12" class="form-validate">
                            <button class="validate" type="button" :disabled="disabled" @click="getPnoneVerCode()">
                                {{ btnmsg }}
                            </button>
                        </el-col>
                    </el-form-item>
                    <el-form-item prop="email">
                        <el-input v-model="registerForm.email" placeholder="输入邮箱" minlength="11" maxlength="11">
                            <i class="el-icon-message el-input__icon" slot="prefix"></i>
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="name">
                        <el-input v-model="registerForm.name" placeholder="输入用户名" minlength="11" maxlength="11">
                            <i class="el-icon-s-custom el-input__icon" slot="prefix"></i>
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input type="password" v-model="registerForm.password" placeholder="输入密码" minlength="11" maxlength="11">
                            <i class="el-icon-lock el-input__icon" slot="prefix"></i>
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="same">
                        <el-input type="password" v-model="registerForm.same" placeholder="再次输入密码" minlength="11" maxlength="11">
                            <i class="el-icon-lock el-input__icon" slot="prefix"></i>
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="validate">
                        <el-col :span="12">
                            <el-input v-model.trim="registerForm.validate" placeholder="验证码" maxlength="4" @keyup.enter.native="login()">
                                <i class="el-icon-discount el-input__icon" slot="prefix"></i>
                            </el-input>
                        </el-col>
                        <el-col :span="12" class="form-validate">
                            <img :src="codeUrl" @click.prevent="getCode()" class="ver-code" />
                        </el-col>
                    </el-form-item>
                    <el-form-item prop="type" class="review-checkbox">
                        <el-checkbox-group v-model="registerForm.type">
                            <el-checkbox label="我同意" name="type" @change="$forceUpdate()">
                                <div class="checkbox-agree">
                                    我同意
                                    <el-link @click.prevent="exemption" type="primary">《免责声明》</el-link>
                                </div>
                            </el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                </el-form>
                <div class="login-button" @click="submitForm('registerForm')">注册</div>
                <div class="other-box" @click="goLogin()">已有账号返回登录</div>
            </div>
        </div>
    </div>
</template>

<script>
import request from '@/js/util/url.js';
import PATH from '@/js/util/path.js';
import message from '@/js/util/message.js';
import { encrypt } from '@/js/util/encrypt.js';
import validate from '@/js/login/login.js';

export default {
    data() {
        let validatorPass = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请再次填写密码'));
            } else if (value !== this.registerForm.password) {
                callback(new Error('两次密码不一致'));
            } else {
                callback();
            }
        };
        return {
            registerForm: {
                name: '',
                email: '',
                phone: '',
                password: '',
                code: '',
                same: '',
                type: '',
                validate: '',
                token: '',
                type: []
            },
            codeUrl: '',
            btnmsg: '获取验证码',
            timer: null,
            maxtime: 60,
            disabled: false,
            rules: {
                phone: [{ required: true, validator: validate.validatePass, trigger: 'blur' }],
                name: [
                    { required: true, message: '请填写姓名', trigger: 'blur' },
                    { min: 2, max: 100, message: '长度在至少2个字符', trigger: 'blur' }
                ],
                email: [
                    { required: false, message: '请填写邮箱地址', trigger: 'blur' },
                    {
                        type: 'email',
                        message: '请填写正确的邮箱地址',
                        trigger: ['blur', 'change']
                    }
                ],
                password: [
                    { required: true, message: '请填写密码', trigger: 'blur' },
                    {
                        min: 6,
                        max: 18,
                        message: '长度在 6 到 18 个字符',
                        trigger: 'blur'
                    }
                ],
                code: [{ required: true, message: '请填写验证码', trigger: 'blur' }],
                same: [{ required: true, validator: validatorPass, trigger: 'blur' }],
                validate: [{ required: true, message: '请填写图形验证码', trigger: 'blur' }],
                type: [{ required: true, message: '请勾选免责说明', trigger: 'change' }]
            }
        };
    },
    created() {
        this.getCode();
    },
    methods: {
        exemption() {
            window.open(`${window.location.href.split(PATH.REGISTER)[0]}${PATH.README}`, 'self');
        },
        getPnoneVerCode() {
            if (!validate.phone(this.registerForm.phone)) {
                message.message('请填写正确的手机号', 'error');
            } else {
                let params = {
                    phone: this.registerForm.phone
                };
                let result = request.getUserCode(params);
                if (result.state.code === 10000) {
                    message.message('发送成功，请查看手机');
                    this.startTimeBar(60);
                } else {
                    message.message(result.body.message, 'error');
                    this.startTimeBar(5);
                }
            }
        },
        startTimeBar(num) {
            if (this.disabled) {
                this.getPnoneVerCode();
            }
            this.maxtime = num;
            this.disabled = true;
            this.timer = setInterval(() => {
                this.startCountDown();
            }, 1000);
        },
        startCountDown() {
            if (this.maxtime >= 0) {
                this.btnmsg = `${this.maxtime}S`;
                this.maxtime--;
            } else {
                clearInterval(this.timer);
                this.disabled = false;
                this.btnmsg = '重新获取';
            }
        },
        getCode() {
            let result = request.getValidateCode();
            if (result.state.code == 10000) {
                this.registerForm.token = result.body.message.token;
                this.codeUrl = result.body.message.image;
            }
        },
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    let { code, email, name, password, phone, validate, token } = this.registerForm;
                    let params = {
                        a: encrypt(password),
                        b: encrypt(name),
                        c: encrypt(phone),
                        code: code,
                        validate: validate,
                        token: token
                    };
                    if (email) {
                        params.d = encrypt(email);
                    }
                    let result = request.register(params);
                    if (result.state.code === 10000) {
                        message.message('注册成功');
                        this.goLogin();
                    } else {
                        message.message(result.body.message, 'error');
                        this.registerForm.validate = '';
                        this.getCode();
                    }
                } else {
                    return false;
                }
            });
        },
        goLogin() {
            this.$router.push({ path: PATH.LOGIN });
        }
    }
};
</script>

<style lang='scss' scoped>
@import url('@/css/login/login.scss');
</style>